<template>
  <div class="button-about-content">
    <template v-if="isImport">
      <div class="button-about-content">
        <a-button @click="downLoadTemplate" class="button-about-excel">
          下载模板
        </a-button>
        <a-button @click="importBtnClick" class="button-about-excel">
          {{ excelImportName }}
        </a-button>
      </div>
    </template>
    <a-modal v-model="visible" title="导入Excel" @ok="handleOk">
      <a-form :form="buttonAboutForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="数据起始行">
          <a-input v-model="excelImportQuery.startRow"/>
        </a-form-item>
        <a-form-item label="选择Excel">
          <a-upload-dragger
              class="uploadAboutImport"
              :beforeUpload="beforeUpload"
              name="file"
              :file-list="fileList">
            <p class="ant-upload-text">
              请选择一个excel文件拖拉至此处上传
            </p>
            <p class="ant-upload-hint">
              或者你也可以点击选择
            </p>
          </a-upload-dragger>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import store from "@/store";
import {downLoadTemplate, excelImport} from "@/api/linYi";
import Bus, {downLoadFileByBlob} from "@/components/buttonAboutExcel/utils";
import {message} from 'ant-design-vue';

export default {
  name: "index",
  props: {
    excelImportName: {
      type: [String],
      default: () => {
        return '导入excel'
      }
    },
    isImport: {
      type: [Number],
      default: () => 0
    },
  },
  inject: {
    connectStore: {
      default: () => ({})
    }
  },
  data() {
    return {
      buttonAboutForm: this.$form.createForm(this, {name:'buttonAboutForm'}),
      visible: false,
      fileList: [],
      excelImportQuery: {
        startRow: '',
        file: [],
      },
      labelCol: {
        span: 5
      },
      wrapperCol: {
        span: 12
      }
    }
  },
  methods: {
    downLoadTemplate() {
      if (this.TableContext.isEditTableComponent) {
        if (store.state.admin.isEditTableHaveData) {
          downLoadTemplate({
            list: this.TableContext.detailAdjustmentData
          }).then(res => {
            if (res.success) {
              downLoadFileByBlob(res.data, "模板")
            } else {
              message.error("下载模板失败")
            }

          })
        } else {
          message.error("未获取到数据，无法下载模板")
        }
      } else {
        downLoadTemplate({
          list: this.TableContext.tableOriginal
        }).then(res => {
          downLoadFileByBlob(res.data, "明细数据")
          if (res.success) {
            downLoadFileByBlob(res.data, "明细数据")
          } else {
            message.error("下载模板失败")
          }
        })
      }
    },

    importBtnClick() {
      if (store.state.admin.isEditTableHaveData || !this.TableContext.isEditTableComponent) {
        this.visible = true
      } else {
        message.error("未获取到数据，无法导入excel")
      }
    },

    handleOk() {
      //buttonAboutForm方法调用验证
      const {fileList} = this;
      if (!fileList.length) {
        message.error("未选择excel文件")
        return
      }
      const formData = new FormData();
      formData.append('startRow', this.excelImportQuery.startRow)
      formData.append('uploadFile', fileList[0])
      excelImport(formData).then(res => {
        if (res.success) {
          // this.TableContext.detailAdjustmentData = res.data
          Bus.$emit('getData', res.data)
        } else {
          message.error("excel导入失败")
        }
        this.fileList = []
        this.visible = false
      })
    },

    beforeUpload(file) {
      this.fileList = [file]
      return false;
    }
  },
  computed: {
    TableContext() {
      return this.connectStore.value.TableContext
    }
  }
}
</script>

<style scoped>
.button-about-excel {
  width: 100px;
  margin-left: 16px;
  border-radius: 3px;
}
</style>
